<script setup lang="ts" name="Transactions">
import dayjs from "dayjs";
import API from "@/api";
import { nocache } from '@/store';

const { t } = useI18n();
const piniaNocache = nocache();
const data: any = reactive({
transactionList:[],
  pagination: {
    loading: false,
    pageNum: 1,
    pageSize: 10,
    total: 0
  }
});

const {
    transactionList,pagination
} = toRefs(data);
const queryTransactionsList = () => {
  pagination.value.loading = true;
  let params = {
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
  }
  API.goldRecordListAPI(params).then((res:any) => {
      if (res?.code === 200) {
        transactionList.value = [...transactionList.value, ...res.rows]
        pagination.value.total = res?.total || 0;
      }
    }).finally(() => {
    pagination.value.loading = false;
  });;
}
queryTransactionsList()

const typeFunc = (type:any) => {
  switch(type) {
    case 1:
    return t('mydeal.state1')
    case 2:
    return t('mydeal.state2')
    case 3:
    return t('mydeal.state3')
    case 4:
    return t('mydeal.state4')
    case 5:
    return t('mydeal.state8')
    case 6:
    return t('mydeal.state7')
    case 7:
    return t('mydeal.state5')
    case 8:
    return t('mydeal.state6')
    case 9:
    return '撤单'
  }
}
watch(() => piniaNocache.getHitBottom, () => {
  let totalPage = Math.ceil(pagination.value.total / pagination.value.pageSize);
  if(pagination.value.pageNum < totalPage){
    pagination.value.pageNum ++;
    queryTransactionsList();
  }
});
</script>

<template>
    <DetailHeader :title="t('mydeal.title1')" :isNeedBackIcon="true" />
    <div class="TransactionsPage">
        <div class="recordItem" v-for="(el,index) in transactionList" :key="index">
            <div class="top">
                <!-- <div>{{ el.id }}</div> -->
                <div>{{ typeFunc(el.type)|| '--' }}</div>
            </div>
            <div class="bottom"> 
                <div class="num">
                    <div>{{ t('mydeal.test1') }}</div> 
                    <div>{{ el.orderId || '--' }}</div>
                </div>
                <div class="num time">
                    <div>{{ t('mydeal.test3') }}</div>
                    <div class="amount">₹ {{ el.money }}</div>
                </div>
                <div class="num time">
                    <div>{{ t('mydeal.test4') }}</div>
                    <div>{{ dayjs(+el.createTime).format('DD-MM-YYYY hh:mm A') }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
